<script>
import axios from "axios"; // 导入axios库用于发起HTTP请求

export default {
  name: "SelectInput", // 组件名称
  data() {
    return {
      inputText: "", // 输入框中的内容
      queryType: "", // 下拉框中的选中值
    };
  },
  methods: {
    handleSearch() {
      // 检查输入是否有效
      if (!this.queryType || !this.inputText.trim()) {
        this.$message.warning("请选择查询类型并输入内容！"); // 提示用户选择查询类型并输入内容
        return;
      }

      let url = ""; // 用于存储请求的URL
      const params = {}; // 用于存储请求参数
      if (this.queryType === "1") {
        url = "/user/findName"; // 名字查询的URL
        params.name = this.inputText; // 参数为输入的名字
      } else if (this.queryType === "2") {
        url = "/user/findPhone"; // 电话查询的URL
        params.phone = this.inputText; // 参数为输入的电话
      } else if (this.queryType === "3") {
        url = "/user/findBookName"; // 书名查询的URL
        params.bookName = this.inputText; // 参数为输入的书名
      }

      // 发起后端请求
      axios
          .post(`http://localhost:8081${url}`, null, { params }) // 发起POST请求，传递参数
          .then((response) => {
            if (response.data.code === 1 && response.data.data.length > 0) {
              this.$message.success("查询成功！"); // 查询成功提示
              this.$emit("search", response.data.data); // 将查询结果传递给父组件
              console.log(response.data.data); // 打印查询结果
            } else {
              this.$message.warning(response.data.msg || "未找到匹配数据！"); // 查询无结果提示
              this.$emit("search", []); // 传递空数组给父组件
            }
          })
          .catch((error) => {
            console.error("查询失败：", error); // 打印查询错误信息
            this.$message.error("查询失败，请重试！"); // 查询失败提示
            this.$emit("search", []); // 出错时也向父组件传递空数据
          });
    },
  },
};
</script>

<template>
  <div>
    <!-- 输入框组件，包含下拉选择和搜索按钮 -->
    <el-input placeholder="请输入内容" v-model="inputText" class="input-with-select">
      <el-select v-model="queryType" slot="prepend" placeholder="请选择查询类型">
        <el-option label="姓名查询" value="1"></el-option>
        <el-option label="电话查询" value="2"></el-option>
        <el-option label="书名查询" value="3"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
    </el-input>
  </div>
</template>

<style>
.el-select .el-input {
  width: 130px; /* 设置下拉选择框的宽度 */
}

.input-with-select .el-input-group__prepend {
  background-color: #fff; /* 设置输入框前置部分的背景颜色 */
}
</style>